<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>我的家乡-景点篇</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/animate.min.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="wrap">
      <!-- header部分 -->
      <div class="header">
        <div class="content">
          <div class="header-left">
            <h3>我的家乡</h3>
          </div>
          <div class="header-mid">
              <ul id="nav" class="animated fadeInLeft">
                  <li><a href="file:///E:/桌面a/我的家乡/index.html"><span>首页</span></a></li>
                  <li><a href="file:///E:/桌面a/我的家乡/food.html"><span>美食</span></a></li>
                  <li class="active"><a href="file:///E:/桌面a/我的家乡/scenery.html"><span>景点</span></a></li>
                  <li><a href="file:///E:/桌面a/我的家乡/custom.html"><span>民俗</span></a></li>
              </ul>
          </div>
          <div class="header-right">
            <a href="https://baike.baidu.com/item/成都/128473?fr=aladdin"><button>Welcome</button></a>
        </div>
        </div>
      </div>
      <!-- scenery-one部分 -->
      <div class="scenery-one">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-side-to="0" class="active"></li>
              <li data-target="#carousel-example-generic" data-side-to="1"></li>
              <li data-target="#carousel-example-generic" data-side-to="2"></li>
          </ol>
          <div class="carousel-inner" role="listbox">
              <div class="item active">
                <div class="jumbotron">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-8 animated slideInLeft">
                                <h2>“快耍慢活”太古里</h2>
                                <p>大自然触手可及，天空从此不一样<br>
                                  传承历史与文化，城市中心重现活力<br>
                                  人与自然、文化与艺术交相辉映</p>
                            </div>
                            <div class="col-md-4 animated rotateIn">
                                <img src="img/tgl.jpg" alt="太古里" style="width: 320px;">
                            </div>
                        </div>
                    </div>
                </div>
                  <div class="carousel-caption">
                      旅游景点推荐
                  </div>
              </div>
              <div class="item">
                <div class="jumbotron">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-8 animated slideInLeft">
                              <h2>宽窄巷子</h2>
                              <p>宽巷子：一个有着老脸庞的怀旧地带<br>
                                宽巷子：一个有着老脸庞的怀旧地带<br>
                                井巷子：一处市井老成都的情景再现</p>
                            </div>
                            <div class="col-md-4 animated rotateIn">
                                <img src="img/kzxz.jpg" alt="宽窄巷子" style="width: 280px;">
                            </div>
                        </div>
                    </div>
                </div>
                  <div class="carousel-caption">
                    旅游景点推荐
                  </div>
              </div>
              <div class="item">
                <div class="jumbotron">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-8 animated slideInLeft">
                              <h2>春熙路</h2>
                              <p>“众人熙熙，如享太牢，如登春台”<br>
                                被业内誉为中国特色商业街<br>
                                堪称成都的美味小吃云集之所</p>
                            </div>
                            <div class="col-md-4 animated rotateIn">
                                <img src="img/cxl.jpg" alt="春熙路" style="width: 400px;">
                            </div>
                        </div>
                    </div>
                </div>
                  <div class="carousel-caption">
                    旅游景点推荐
                  </div>
              </div>
          </div>
          <a class="left carousel-control" href="#myCarousel" role="button" data-side="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-side="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <!-- scenery-two部分 -->
    <div class="scenery-two">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-side-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-side-to="1"></li>
            <li data-target="#carousel-example-generic" data-side-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
              <div class="jumbotron">
                  <div class="container">
                      <div class="row">
                          <div class="col-md-8 animated slideInLeft">
                              <h2>杜甫草堂</h2>
                              <p>“锦水春风公占却，草堂人日我归来”<br>
                                “花径不曾缘客扫，蓬门今始为君开”<br>
                                因诗名扬天下，借诗圣而后世流芳</p>
                          </div>
                          <div class="col-md-4 animated rotateIn">
                              <img src="img/dfct.jpg" alt="杜甫草堂" style="width: 270px;">
                          </div>
                      </div>
                  </div>
              </div>
                <div class="carousel-caption">
                    旅游景点推荐
                </div>
            </div>
            <div class="item">
              <div class="jumbotron">
                  <div class="container">
                      <div class="row">
                          <div class="col-md-8 animated slideInLeft">
                            <h2>武侯祠</h2>
                            <p>诸葛亮“鞠躬尽瘁死而后已”精神的肯定和赞誉<br>
                              被公布为全国第一批重点文物保护单位<br>
                              有“三国圣地”的荣誉</p>
                          </div>
                          <div class="col-md-4 animated rotateIn">
                              <img src="img/whc.jpg" alt="武侯祠" style="width: 290px;">
                          </div>
                      </div>
                  </div>
              </div>
                <div class="carousel-caption">
                  旅游景点推荐
                </div>
            </div>
            <div class="item">
              <div class="jumbotron">
                  <div class="container">
                      <div class="row">
                          <div class="col-md-8 animated slideInLeft">
                            <h2>金沙遗址</h2>
                            <p>“自然之美，草野之趣”<br>
                              宝墩文化——三星堆文化——金沙·十二桥文化——晚期蜀文化<br>
                              镇馆之宝“太阳神鸟”金饰</p>
                          </div>
                          <div class="col-md-4 animated rotateIn">
                              <img src="img/jsyz.png" alt="金沙遗址" style="width: 270px;">
                          </div>
                      </div>
                  </div>
              </div>
                <div class="carousel-caption">
                  旅游景点推荐
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" role="button" data-side="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-side="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
  <!-- scenery-three部分 -->
  <div class="scenery-three">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-side-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-side-to="1"></li>
          <li data-target="#carousel-example-generic" data-side-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
          <div class="item active">
            <div class="jumbotron">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 animated slideInLeft">
                            <h2>青城山</h2>
                            <p>自古就有“青城天下幽”的赞誉<br>
                              “自为青城客，不唾青城池。为爱丈人山，丹梯近幽意。”<br>
                              “丈人祠西佳气浓，绿云拟住最高峰。”</p>
                        </div>
                        <div class="col-md-4 animated rotateIn">
                            <img src="img/qcs.jpg" alt="青城山" style="width: 280px;">
                        </div>
                    </div>
                </div>
            </div>
              <div class="carousel-caption">
                  旅游景点推荐
              </div>
          </div>
          <div class="item">
            <div class="jumbotron">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 animated slideInLeft">
                          <h2>青羊宫</h2>
                          <p>被誉为“川西第一道观”、“西南第一丛林”<br>
                            是道教全国重点宫观，四川省重点文物保护单位<br>
                            原名青羊肆，始建于周朝。</p>
                        </div>
                        <div class="col-md-4 animated rotateIn">
                            <img src="img/qyg.jpg" alt="青羊宫" style="width: 280px;">
                        </div>
                    </div>
                </div>
            </div>
              <div class="carousel-caption">
                旅游景点推荐
              </div>
          </div>
          <div class="item">
            <div class="jumbotron">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 animated slideInLeft">
                          <h2>洛带古镇</h2>
                          <p>“走进历史—回归自然—体验山水”<br>
                            “中国西部客家第一镇”<br>
                            “世界的洛带、永远的客家”</p>
                        </div>
                        <div class="col-md-4 animated rotateIn">
                            <img src="img/ldgz.jpg" alt="洛带古镇" style="width: 280px;">
                        </div>
                    </div>
                </div>
            </div>
              <div class="carousel-caption">
                旅游景点推荐
              </div>
          </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-side="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-side="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<!-- poetry部分 -->
<div class="poetry">
  <div class="content">
     <div class="container">
       <div class="page-header">
         <h1>邂逅成都</h1>
       </div>
     </div>
       <div class="container">
         <div class="row">
           <div class="col-md-4">
               <div class="caption">
                 <h3>唐张籍《成都曲》</h3>
                 <p>锦江近百烟水绿，新雨山头荔枝熟。</p>
                 <p>万里桥边多酒家，游人爱向谁家宿？</p>
               </div>
             </div>
             <div class="col-md-4">
               <div class="caption">
                 <h3>杜甫《春夜喜雨》</h3>
                 <p>好雨知时节，当春乃发生。</p>
                 <p>随风潜入夜，润物细无声。</p>
                 <p>野径云俱黑，江船火独明。</p>
                 <p>晓看红湿处，花重锦官城。</p>
               </div>
             </div>
             <div class="col-md-4">
               <div class="caption">
                 <h3>岑参《万里桥》</h3>
                 <p>成都与维扬，相去万里地。</p>
                 <p>沧江东流疾，帆去如鸟翅。</p>
                 <p>楚客过此桥，东看尽垂泪。</p>
               </div>
             </div>
           </div>
    </div>
</div>
</div>
  </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>
<script>
  $(function () {
      $('#myCarousel').carousel({
          interval: 2000,
      })
      $("#myCarousel li").click(function () {
          var index=$(this).attr("data-slide-to")
          $('#myCarousel').carousel(parseInt(index))
        })
  })
</script>